<script setup>
	import { onMounted, reactive, ref } from "vue";
	import dayjs from "dayjs";
	import Controller from "@/components/Controller";
	import Panel from "@/components/Panel.vue";
	import SearchBox from "@/components/SearchBox.vue";
	import SearchBar from "@/components/SearchBar.vue";
	import * as api from "@/api";

	let formstate = reactive({
		deviceType: "",
		executeCommand: "",
		createdBegin: "",
		createdEnd: "",
	});

	let columns = [
		{ title: "序号", dataIndex: "dataIndex", width: 80, align: "center" },
		{ title: "设备ip", dataIndex: "deviceIp", width: 140, align: "center" },
		{ title: "网元类型", dataIndex: "deviceTypeName", width: 100, align: "center" },
		{ title: "操作人员", dataIndex: "createdBy", width: 100, align: "center" },
		{ title: "指令下发时间", dataIndex: "created", align: "center" },
		{ title: "下发指令", dataIndex: "executeCommand" },
		{ title: "下发指令结果", dataIndex: "executeResult", ellipsis: true },
		{ title: "操作", dataIndex: "operation", width: 160, align: "center" },
	];

	let dataSource = ref([]);

	let pagination = reactive({
		total: 1,
		current: 1,
		pageSize: 10,
	});

	function deviceSelectFocusHandler() {
		console.log("deviceSelectFocusHandler");
	}

	function searchHandler() {
		api.searchExecuteRecords().then(({ res }) => {
			if (res.data) {
				dataSource.value = res.data.records;
				pagination.current = res.data.current;
				pagination.total = res.data.total;
				pagination.pageSize = res.data.size;
			}
		});
	}

	onMounted(() => {
		searchHandler();
	});
</script>

<template>
	<Controller.Breadcrumb :paths="['自动化测试', '指令批量下发']"/>
	<Panel>
		<SearchBox>
			<template #label>设备ip：</template>
			<template #content>
				<a-select
					class="device-select"
					mode="multiple"
					:open="false"
					@focus="deviceSelectFocusHandler"
				>
					<a-select-option value="1">1</a-select-option>
					<a-select-option value="2">2</a-select-option>
					<a-select-option value="3">3</a-select-option>
					<a-select-option value="4">4</a-select-option>
					<a-select-option value="5">5</a-select-option>
				</a-select>
			</template>
			<template #control>
				<a-button type="primary">选择设备</a-button>
			</template>
		</SearchBox>
		<SearchBox>
			<template #label>下发指令：</template>
			<template #content>
				<a-input placeholder="请输入下发指令"></a-input>
			</template>
			<template #control>
				<a-button type="primary">指令下发</a-button>
			</template>
		</SearchBox>
	</Panel>
	<Panel title="结果展示">
		<SearchBar @submit="searchHandler">
			<template #condition>
				<a-form-item label="网元类型" name="deviceType">
					<a-select v-model:value="formstate.deviceType" style="width: 120px" allowClear>
						<a-select-option value="0">TS3000U</a-select-option>
						<a-select-option value="1">SM2000</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="下发指令" name="executeCommand">
					<a-input v-model:value="formstate.executeCommand" allowClear></a-input>
				</a-form-item>
				<a-form-item label="下发时间" name="time">
					<a-range-picker show-time />
				</a-form-item>
			</template>
			<template #control></template>
		</SearchBar>
		<a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 400 }" :pagination="false">
			<template #bodyCell="{ column, index }">
				<template v-if="column.dataIndex === 'dataIndex'">
					{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
				</template>
				<template v-if="column.dataIndex === 'created'">
					{{ dayjs(created).format("YYYY/MM/DD HH:mm:ss") }}
				</template>
				<template v-if="column.dataIndex === 'operation'">
					<a-button type="link" >详情</a-button>
				</template>
			</template>
		</a-table>
		<a-pagination class="table-pagination" v-bind="pagination" show-size-changer show-quick-jumper />
	</Panel>
</template>

<style scoped lang="less">
	.device-select {
		width: 100%;
		height: 80px;
		:deep(.ant-select-selector) {
			height: 100%;
		}
	}
</style>
